<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.9.1.min.js"></script>

    <link rel="stylesheet" type="text/css" href="../plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="../css/fs.css" media="all"/>
    <script type="text/javascript" src="../plugins/layui/layui.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../controller/music.js?t=20190111"></script>
    <style>
        .layui-form-label{
            width: 100px;
        }
    </style>
</head>
<body>
    <blockquote style="margin-top: 10px;margin-left: 5px;margin-right: 5px;height: 60px" class="layui-elem-quote news_search">
        <div class="demoTable">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="searchtitle" placeholder="音乐名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="searchartist" placeholder="作者" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <button class="layui-btn" data-type="reload"><i class="layui-icon">&#xe615;</i>查询</button>
                    </div>
                </div>
            </div>

        </div>
    </blockquote>
    <div style="margin-left: 5px;margin-right: 5px" >
        <div class="layui-col-md12">
            <blockquote>
                <div class="layui-btn-group demoTable">
                    <button id="add" class="layui-btn"  >
                        <i class="layui-icon">&#xe654;</i>新增
                    </button>
                    <button class="layui-btn layui-btn-danger" data-type="getCheckData">
                        <i class="layui-icon">&#xe640;</i>批量删除
                    </button>
                </div>
            </blockquote>
        </div>

        <table class="layui-hide" lay-filter="demo" id="table"></table>
    </div>
    <!--bgm窗口-->
    <div style="display: none; margin-top:30px;margin-left: 30px" id="music">
        <form class="layui-form" id="bgm" action="" lay-filter="">


            <div  class="layui-form-item">
                <div class="layui-input-block">
                        <button type="button"  class="layui-btn"   id="uploadBgm"><i class="layui-icon"></i>选择bgm</button>
                        <div id="audio"  class="layui-upload-list">
                            <audio  id="bgmAudio" controls="controls"></audio>
                            <input type="hidden" name="musicId"/>
                        </div>
                    </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">音乐名</label>
                <div style="width: 400px" class="layui-input-inline">
                    <input type="hidden" id="musicId" name="id">
                    <input type="text"   class="layui-input" name="title"  lay-verify="required"  >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">艺术家</label>
                <div style="width: 400px" class="layui-input-inline">
                    <input type="text"   class="layui-input" name="artist"    >
                </div>
            </div>

            <div  class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-inline">
                    <input type="number"    name="sortIndex"  lay-verify="search"   class="layui-input">
                </div>
            </div>
            <div style="display: none" class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="addAndUpdate">立即提交</button>
                </div>
            </div>
        </form>
    </div>
    <!--bgm窗口-->
    <script type="text/html" id="barDemo">
        <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">播放</a>-->
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    </script>
<script>
    layui.use(['form', 'layedit', 'laydate',"table",'upload'], function() {
        var $ = layui.jquery
            , upload = layui.upload;
        var table = layui.table;


        //方法级渲染
        table.render({
            elem: '#table'
            ,url: '/musicController/paramlist'
            ,cols: [
                [
                    {type:'checkbox'},

                    {type:'numbers', title: '序',align:"center"},

                    { field: 'title',title: '音乐名',align:"center"},

                    { field: 'artist', title: '艺术家',align:"center"},

                    {field: 'createTime',align:"center", title: '创建时间',templet: function(d){
                        if(isNull(d.createTime)){
                            return "-";
                        }
                        return getFormatDateByLong(d.createTime, "yyyy-MM-dd hh:mm");
                    }},
                    {field: null , title: '操作',align:"center",templet:"#barDemo" }
                ]
            ]
            ,id: 'testReload'
            ,page: true
            ,done:function (res, curr, count) {
                sessionStorage.setItem("curr",curr)

            }
        });

        var $ = layui.$, active = {
            reload: function(){
                var title=$("input[name='searchtitle']").val()
                var artist=$("input[name='searchartist']").val()
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        title: title,
                        artist:artist
                    }
                });
            },
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('testReload')
                    ,data = checkStatus.data;

                if(data.length == 0){
                    layer.alert('请选择至少一条数据', {icon: 5});
                    return false
                }
                var json = JSON.stringify(data)
                var ids =new Array();
                $.each(eval(json),function (i,n) {
                    ids.push(n.id)
                })
                ids.join(',')
                layer.confirm('确定删除吗?', function(index){
                    $.ajax({
                        url:"/musicController/delByIds?ids="+ids,
                        type:"POST",
                        dataType:"json",
                        success:function (data) {
                            if(data.ret ==0 || data.ret =="0"){
                                layer.alert('删除成功', {icon: 1}, function(index){
                                    layer.close(index);
                                    var curr = sessionStorage.getItem("curr");
                                    table.reload('testReload',{page:{curr:curr}});
                                });
                            }

                        }
                    })
                    layer.close(index);

                });


            }

        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });



    })


</script>
</body>
</html>